<template>
   <div class="more-item">
      <ul v-if="list">
         <router-link    v-for="value in  list" 
          :key='value.id' 
          :data-id="value.id"
          tag="li" 
          :to="`/detail/${value.id}`"
         >
          <div>
           <img :src="value.verticalPic" alt="">  
             </div> 
             <div>
                <h3>{{value.name}}</h3>
                <p> {{value.venuecity}} / {{value.showtime}} / {{value.venue}}</p>
                <h4>{{value.price_str}}</h4>     
                </div> 
         </router-link>         
      </ul> 
      <div class="outer" v-else>
        <div> 
         <p>没有找到符合条件的项目</p>
        <p>你可以减少筛选条件重新测试</p>
        </div>
      
      </div>
   </div>
</template>

<script>
import {get} from  '../../utils/http' 
import BScroll from 'better-scroll'
import { Loading,Toast } from 'vant';
import Vue from 'vue'
Vue.use(Loading);
export default {
    props: ['parentlist','hotall'],
data () {
    return {
        list:[],
        id:'',
        show:true
       
    }
},
methods: { 
 
},
watch: {
  parentlist(){
     this.list=this.parentlist
    this.$forceUpdate()    
  },
},
 async  mounted () {
     let city='北京'
    let ctl=this.$route.params.nm    
    let result = await get({
           url: `https://search.damai.cn/searchajax.html?keyword=&cty=&ctl=${ctl}&sctl=&tsg=0&st=&et=&order=1&pageSize=10&currPage=1&tn=`,

    })
     console.log(result);  
     this.list=result.data.pageData.resultData
     console.log(result.data.pageData.resultData);   
  let bScroll = new BScroll('.more-item', {
      pullUpLoad: true,
      click: true,
      probeType: 2
    })
      let page=1
    bScroll.on('pullingUp',async ()=>{
       page++
       if(page<result.data.pageData.maxPage){  
        let result = await get({
      url: `https://search.damai.cn/searchajax.html?keyword=&cty=&ctl=演唱会&sctl=&tsg=0&st=&et=&order=1&pageSize=10&currPage=${page}&tn=`,
     
    }) 
     this.list=[...this.list,...result.data.pageData.resultData]
      
     this.$nextTick(()=>{
         bScroll.refresh()
     })
   // console.log(result.data.pageData.resultData)  
         bScroll.finishPullUp()
         }else{
             Toast.loading({
         message: '到底了。。。',
         forbidClick: true
})
         }
     
    })

   
    
  },
 

}
</script>

<style lang="stylus" scoped>
 .more-item
          padding 0.4rem  0.4rem  0  0.4rem
          width 100%
          overflow hidden
          height 100%
          background white
          ul
           width 100%
           overflow hidden
           li
            display flex
            flex-direction row 
            height 2.4rem
            width 100%
            margin-top 0.7rem
            >div:first-child
               font-size 0
               height 0
               padding-bottom  1.3296%              
               img 
                width 1.82rem
                height  2.42rem    
            >div:last-child
               position relative
               padding-left 0.24rem
               width 100%
               h3
                font-size 0.32rem
                width 90%            
               p
                overflow hidden              
                width  90%
                font-size 0.24rem
                color #aaaaaa
                padding-top 0.12rem         
                text-overflow ellipsis
                white-space nowrap
               h4
                font-size 0.28rem
                color #ff1268
                position absolute
                bottom 0.1rem

  .outer
    display flex
    justify-content center
    align-items center
    height 100%
    width 100%
    background-image url('https://img.alicdn.com/tfs/TB1iCH.kwHqK1RjSZFPXXcwapXa-253-248.png')  
    background-repeat no-repeat 
    background-position left 40px top 20px
    text-align center
    font-size 0.28rem
    color #AAA 
   
        
           
</style>